@import '@/variables.styl'

body
  font-family 'Arial', sans-serif
  margin 0
  padding 0
  background-color #ffffff
  color lightgray
  box-sizing border-box
  *
   box-sizing border-box

/** 主题色 */

.theme-light
  --color-success color-success-light
  --color-success-bright lighten(color-success-light, 5)
  --color-success-dim darken(color-success-light, 5)
  --color-info color-info-light
  --color-info-bright lighten(color-info-light, 5)
  --color-info-dim darken(color-info-light, 5)
  --color-warn color-warn-light
  --color-warn-bright lighten(color-warn-light, 5)
  --color-warn-dim darken(color-warn-light, 5)
  --color-caution color-caution-light
  --color-caution-bright lighten(color-caution-light, 5)
  --color-caution-dim darken(color-caution-light, 5)
  --color-danger color-danger-light
  --color-danger-bright lighten(color-danger-light, 5)
  --color-danger-dim darken(color-danger-light, 5)
  --color-fg-primary color-fg-primary-light
  --color-fg-primary-bright lighten(color-fg-primary-light, 5)
  --color-fg-primary-dim darken(color-fg-primary-light, 5)
  --color-fg-regular color-fg-regular-light
  --color-fg-regular-bright lighten(color-fg-regular-light, 5)
  --color-fg-regular-dim darken(color-fg-regular-light, 5)
  --color-fg-secondary color-fg-secondary-light
  --color-fg-secondary-bright lighten(color-fg-secondary-light, 5)
  --color-fg-secondary-dim darken(color-fg-secondary-light, 5)
  --color-fg-undertone color-fg-undertone-light
  --color-fg-undertone-bright lighten(color-fg-undertone-light, 5)
  --color-fg-undertone-dim darken(color-fg-undertone-light, 5)
  --color-bg-default color-bg-default-light
  --color-bg-default-bright lighten(color-bg-default-light, 5)
  --color-bg-default-dim darken(color-bg-default-light, 5)
  --color-bg-secondary color-bg-secondary-light
  --color-bg-secondary-bright lighten(color-bg-secondary-light, 5)
  --color-bg-secondary-dim darken(color-bg-secondary-light, 5)
  --color-fg-accent color-fg-accent-light
  --color-fg-accent-bright lighten(color-fg-accent-light, 5)
  --color-fg-accent-dim darken(color-fg-accent-light, 5)
  --color-bg-accent color-bg-accent-light
  --color-bg-accent-bright lighten(color-bg-accent-light, 5)
  --color-bg-accent-dim darken(color-bg-accent-light, 5)
  --color-breakdown color-breakdown-light
  --color-bg-white color-bg-white-light
  --el-color-primary: color-info-light !important // 覆盖element-ui的主题色

.theme-dark
  --el-color-primary: color-success-dark !important // 覆盖element-ui的主题色
  --color-success color-success-dark
  --color-success-bright lighten(color-success-dark, 5)
  --color-success-dim darken(color-success-dark, 5)
  --color-info color-info-dark
  --color-info-bright lighten(color-info-dark, 5)
  --color-info-dim darken(color-info-dark, 5)
  --color-warn color-warn-dark
  --color-warn-bright lighten(color-warn-dark, 5)
  --color-warn-dim darken(color-warn-dark, 5)
  --color-caution color-caution-dark
  --color-caution-bright lighten(color-caution-dark, 5)
  --color-caution-dim darken(color-caution-dark, 5)
  --color-danger color-danger-dark
  --color-danger-bright lighten(color-danger-dark, 5)
  --color-danger-dim darken(color-danger-dark, 5)
  --color-fg-primary color-fg-primary-dark
  --color-fg-primary-bright lighten(color-fg-primary-dark, 5)
  --color-fg-primary-dim darken(color-fg-primary-dark, 5)
  --color-fg-regular color-fg-regular-dark
  --color-fg-regular-bright lighten(color-fg-regular-dark, 5)
  --color-fg-regular-dim darken(color-fg-regular-dark, 5)
  --color-fg-secondary color-fg-secondary-dark
  --color-fg-secondary-bright lighten(color-fg-secondary-dark, 5)
  --color-fg-secondary-dim darken(color-fg-secondary-dark, 5)
  --color-fg-undertone color-fg-undertone-dark
  --color-fg-undertone-bright lighten(color-fg-undertone-dark, 5)
  --color-fg-undertone-dim darken(color-fg-undertone-dark, 5)
  --color-bg-default color-bg-default-dark
  --color-bg-default-bright lighten(color-bg-default-dark, 5)
  --color-bg-default-dim darken(color-bg-default-dark, 5)
  --color-bg-secondary color-bg-secondary-dark
  --color-bg-secondary-bright lighten(color-bg-secondary-dark, 5)
  --color-bg-secondary-dim darken(color-bg-secondary-dark, 5)
  --color-fg-accent color-fg-accent-dark
  --color-fg-accent-bright lighten(color-fg-accent-dark, 5)
  --color-fg-accent-dim darken(color-fg-accent-dark, 5)
  --color-bg-accent color-bg-accent-dark
  --color-bg-accent-bright lighten(color-bg-accent-dark, 5)
  --color-bg-accent-dim darken(color-bg-accent-dark, 5)
  --color-breakdown color-breakdown-dark
  --color-bg-white color-bg-white-dark


/* 文字颜色类 */

.text-success
  color var(--color-success)
.text-info
  color var(--color-info)
.text-warn
  color var(--color-warn)
.text-caution
  color var(--color-caution)
.text-danger
  color var(--color-danger)
.text-primary
  color var(--color-fg-primary)
.text-regular
  color var(--color-fg-regular)
.text-secondary
  color var(--color-fg-secondary)
.text-undertone
  color var(--color-fg-undertone)
.text-accent
  color var(--color-fg-accent)
.text-breakdown
  color var(--color-breakdown)


/* 背景颜色类 */

.bg-success
  background-color var(--color-success)
.bg-info
  background-color var(--color-info)
.bg-warn
  background-color var(--color-warn)
.bg-caution
  background-color var(--color-caution)
.bg-danger
  background-color var(--color-danger)
.bg-default
  background-color var(--color-bg-default)
.bg-secondary
  background-color var(--color-bg-secondary)
.bg-accent
  background-color var(--color-bg-accent)
.bg-none
  background-color transparent